<!DOCTYPE html>
<html>
<body>
<canvas id="physicsCanvas" width="450" height="400" style="border:1px solid #d3d3d3;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = 'bold 20px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // --- Helper function to draw a standard arrow ---
    function drawArrow(fromX, fromY, toX, toY) {
        const headLength = 10; // Length of the arrowhead lines
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        ctx.beginPath();
        // Draw the main line
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);

        // Draw the arrowhead
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing Parameters ---
    const cx = 225; // Center X for force application
    const cy = 180; // Center Y for force application
    const inclineAngleDeg = 25;
    const inclineAngleRad = inclineAngleDeg * Math.PI / 180;

    // --- 1. Draw the Inclined Plane ---
    // The drawing angle is negative because the canvas Y-axis points down.
    const drawingAngle = -inclineAngleRad;
    const planeLength = 180; // Length of the plane from the center
    const planeThickness = 6; // Distance between the two parallel lines

    // Calculate endpoints for the top line of the plane
    const p1x = cx - planeLength * Math.cos(drawingAngle);
    const p1y = cy - planeLength * Math.sin(drawingAngle);
    const p2x = cx + planeLength * Math.cos(drawingAngle);
    const p2y = cy + planeLength * Math.sin(drawingAngle);

    // Draw the top line (where forces originate)
    ctx.beginPath();
    ctx.moveTo(p1x, p1y);
    ctx.lineTo(p2x, p2y);
    ctx.stroke();

    // Calculate offset for the second parallel line
    const perpAngle = drawingAngle + Math.PI / 2;
    const offsetX = planeThickness * Math.cos(perpAngle);
    const offsetY = planeThickness * Math.sin(perpAngle);
    
    // Draw the bottom line
    ctx.beginPath();
    ctx.moveTo(p1x + offsetX, p1y + offsetY);
    ctx.lineTo(p2x + offsetX, p2y + offsetY);
    ctx.stroke();


    // --- 2. Define and Draw Force Vectors ---
    // Define relative lengths based on physics to make the diagram visually correct
    const W_len = 90; // Weight vector length
    const F_len = 35; // Applied force vector length
    const n_len = W_len * Math.cos(inclineAngleRad); // Normal force length: n = W*cos(theta)
    const f_len = F_len + W_len * Math.sin(inclineAngleRad); // Friction length: f = F + W*sin(theta)

    // Draw force 'w' (Weight) - vertically down
    const wx_end = cx;
    const wy_end = cy + W_len;
    drawArrow(cx, cy, wx_end, wy_end);
    ctx.fillText('w', wx_end - 20, wy_end + 10);

    // Draw force 'n' (Normal) - perpendicular to the incline
    const n_angle = drawingAngle - Math.PI / 2;
    const nx_end = cx + n_len * Math.cos(n_angle);
    const ny_end = cy + n_len * Math.sin(n_angle);
    drawArrow(cx, cy, nx_end, ny_end);
    ctx.fillText('n', nx_end - 15, ny_end - 15);

    // Draw force 'F' (Applied Push) - down along the incline
    const F_angle = drawingAngle + Math.PI;
    const Fx_end = cx + F_len * Math.cos(F_angle);
    const Fy_end = cy + F_len * Math.sin(F_angle);
    drawArrow(cx, cy, Fx_end, Fy_end);
    ctx.fillText('F', Fx_end - 20, Fy_end - 10);

    // Draw force 'f' (Friction) - up along the incline (special double line)
    const f_angle = drawingAngle;
    const fx_end = cx + f_len * Math.cos(f_angle);
    const fy_end = cy + f_len * Math.sin(f_angle);
    const f_offset = 2.5;
    const f_perpAngle = f_angle + Math.PI / 2;
    const f_ox = f_offset * Math.cos(f_perpAngle);
    const f_oy = f_offset * Math.sin(f_perpAngle);
    
    // Draw the two parallel lines for 'f'
    ctx.beginPath();
    ctx.moveTo(cx - f_ox, cy - f_oy);
    ctx.lineTo(fx_end - f_ox, fy_end - f_oy);
    ctx.moveTo(cx + f_ox, cy + f_oy);
    ctx.lineTo(fx_end + f_ox, fy_end + f_oy);
    ctx.stroke();
    
    // Draw the single arrowhead for 'f'
    drawArrow(fx_end, fy_end, fx_end, fy_end); // A trick to only draw the arrowhead
    ctx.fillText('f', fx_end + 15, fy_end - 15);

</script>

</body>
</html>